<template>
    <div>
        <!--<div class="tab-back">-->
            <!--<span class="left" @click="toback()"></span><div class="title">关注列表</div>-->
            <!--<div class="right"></div>-->
        <!--</div>-->
        <div class="fans-attention">
            <div class="fans-attention-bar">
                <img src="">
                <span>关注：{{total}}</span>
            </div>
            <ul>
                <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        loading-text="加载中"
                        :immediate-check="false"
                        @load="onLoad"
                >
                    <li v-for="(item,index) in list" @click="zhuye(item.id)"><img :src="item.avatar"><p>{{item.nickname}}</p><span></span></li>
                </van-list>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "",
        data(){
            return {
                loading: false,
                finished: false,
                page:1,
                total:0,
                list:[]
            }
        },
        mounted(){
            this.getList()
        },
        methods:{
            toback(){
                this.$router.go(-1);//返回上一层
            },
            //主页
            zhuye(id){
                this.$router.push("/Wodeliao/zaishouliebiao/"+id)
            },
            //触底加载更多
            onLoad() {
                // 异步更新数据
                this.page++;
                this.getList();
            },
            getList(){
                var that=this;
                that.request1.post1({
                    url: that.Url + "api/user.index/myfocus",
                    params: {page:that.page },
                    success: function (res) {
                        console.log(res)
                        if (res.data.code == 1) {
                            var ress=res.data.data.lists.data;
                            that.total=res.data.data.lists.total;
                            if (ress.length < 1 || ress == null ) {
                                // 加载结束
                                that.finished = true;
                                return;
                            }else {
                                that.list.push.apply(that.list,ress)
                            }
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg)
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .tab-back {
        height: 44px;
        background: #fc5d4d;
        display: -webkit-box;
    }
    .tab-back .left {
        width: 44px;
        display: block;
        height: 44px;
        background: url() no-repeat 50%;
        background-size: 9px 16px;
    }
    .tab-back .title {
        -webkit-box-flex: 1;
        font-size: 15px;
        color: #fff;
        font-weight: 700;
        text-align: center;
        line-height: 44px;
    }
    .tab-back .right {
        width: 44px;
        height: 44px;
    }
    .fans-attention .fans-attention-bar {
        height: 40px;
        background: #fff;
        width: 100%;
        border-bottom: .5px solid #efeff4;
        text-align: center;
    }
    .fans-attention .fans-attention-bar img {
        display: inline-block;
        width: 13px;
        margin-right: 6px;
        margin-top: -2px;
    }
    .fans-attention .fans-attention-bar span {
        display: inline-block;
        height: 40px;
        line-height: 40px;
        font-size: 13px;
        color: #999;
    }
    .fans-attention ul li {
        display: block;
        height: 60px;
        padding: 0 15px;
        background: #fff;
        line-height: 60px;
        border-bottom: .5px solid #efeff4;
    }
    .fans-attention ul li img {
        display: block;
        width: 38px;
        height: 38px;
        margin-top: 11px;
        float: left;
        border-radius: 50px;
    }
    .fans-attention ul li p {
        display: block;
        height: 60px;
        float: left;
        margin-left: 10px;
        font-size: 13px;
    }
    .fans-attention ul li span {
        width: 20px;
        height: 60px;
        float: right;
        right: 15px;
        background: url() 100% no-repeat;
        background-size: 6px;
    }
</style>